import React,{Component} from 'react';
import {Modal, Row, Col, Form, Input, Select, DatePicker, Upload, Button, Icon, TreeSelect, message} from 'antd';
import moment from 'moment'
import config from '../config';
let formItemLayoutExample = {
  labelCol: {span: 8},
  wrapperCol: {span: 16}
};
const { TextArea } = Input;
let FormItem = Form.Item;

class MyModel extends Component{
  saveHandle(){
    let params = this.props.form.getFieldsValue();
    this.props.onSave(params)
  }
  render(){
    let {items} = this.props;
    let itemsExam = [
      {
        title:'标题',
        sub:[
          {
            type:'text',
            label: `文字`,
            paramName: 'word',
            initialValue: '',
            span: 8,
            width: 138,
            rules:[],
            addonAfter:'后缀'
          }
        ]
      }
    ];
    let {getFieldDecorator} = this.props.form;
    let formItemLayout = this.props.formItemLayout || formItemLayoutExample;
    return(
      <Modal
        {...this.props}
        className={this.props.editAble ? 'xnw-modal xnw-clearBorder' :'xnw-modal'}
        onOk={this.saveHandle.bind(this)}
      >
        <div className="">
          {items.map((item,index) => {
            return (
              <Row key={index}>
                {
                  item.title &&
                  <div className="wp-tab t-MB10">
                    <div className="wp-tab-header" style={{minWidth: 86}}>
                      <span>{item.title}</span>
                    </div>
                  </div>
                }
                {
                  item.sub.map((sub, index2) => {
                    if (sub.type === 'text') {
                      return (
                        <Col span={sub.span} key={index2} offset={sub.offset}>
                          <FormItem  {...formItemLayout} label={sub.label}>
                            {
                              getFieldDecorator(sub.paramName, {
                                initialValue: sub.initialValue,
                                rules: sub.rules
                              })(
                                <Input
                                  disabled={true}
                                  addonAfter={sub.addonAfter || ''}
                                  style={{
                                    width:sub.width
                                  }}
                                  className='xnw-inputText'
                                  size={config.size}/>
                              )
                            }
                          </FormItem>
                        </Col>
                      )
                    }
                    else if (sub.type === 'input') {
                      return (
                        <Col span={sub.span} key={index2}  offset={sub.offset}>
                          <FormItem  {...formItemLayout} label={sub.label}>
                            {
                              getFieldDecorator(sub.paramName, {
                                initialValue: sub.initialValue,
                                rules: sub.rules
                              })(
                                <Input
                                  disabled={this.props.editAble}
                                  addonAfter={sub.addonAfter || ''}
                                  style={{width: sub.width, marginTop: 5}}
                                  size={config.size}/>
                              )
                            }
                          </FormItem>
                        </Col>
                      )
                    }
                    else if (sub.type === 'select') {
                      return (
                        <Col span={sub.span} key={index2} offset={sub.offset}>
                          <FormItem {...formItemLayout} label={sub.label}>
                            {
                              getFieldDecorator(sub.paramName, {
                                initialValue: {key: sub.initialValue},
                                rules: sub.rules
                              })(
                                <Select
                                  placeholder='请选择'
                                  labelInValue
                                  onChange={sub.onChange}
                                  disabled={this.props.editAble}
                                  style={{width: sub.width, marginTop: 5}}
                                  size={config.size}
                                >
                                  {
                                    sub.option.map((item2, index) => {
                                      return (
                                        <Select.Option key={index} value={item2.value}>{item2.text}</Select.Option>
                                      )
                                    })
                                  }
                                </Select>
                              )
                            }
                          </FormItem>
                        </Col>
                      )
                    }
                    else if (sub.type === 'datePicker') {
                      return (
                        <Col span={sub.span} key={index2} offset={sub.offset}>
                          <FormItem {...formItemLayout} label={sub.label}>
                            {
                              getFieldDecorator(sub.paramName, {
                                initialValue: sub.initialValue ? moment(sub.initialValue) : null,
                                rules: sub.rules
                              })(
                                <DatePicker
                                  size={config.size}
                                  disabled={this.props.editAble}
                                  onChange={sub.onChange || null}
                                  style={{width: sub.width, marginTop: 5}}
                                  dateFormat={sub.dateFormat || 'YYYY-MM-DD'}
                                />
                              )
                            }
                          </FormItem>
                        </Col>
                      )
                    }
                    else if (sub.type === 'textArea') {
                      return (
                        <Col span={sub.span} key={index2} offset={sub.offset}>
                          <FormItem {...formItemLayout} label={sub.label}>
                            {
                              getFieldDecorator(sub.paramName, {
                                initialValue: sub.initialValue,
                                rules: sub.rules
                              })(
                                <TextArea
                                  size={config.size}
                                  placeholder={sub.placeholder || ''}
                                  disabled={this.props.editAble}
                                  style={{width: sub.width, marginTop: 5}}
                                  autosize={sub.autosize || true}
                                />
                              )
                            }
                          </FormItem>
                        </Col>
                      )
                    }
                  })
                }
              </Row>
            )
          })}
        </div>
      </Modal>
    )
  }
}

export default Form.create()(MyModel);
